// import React, { useRef } from "react";
// // useRef和createRef的用法和功能是一样的
// // 一样可以做非受控组件

// const App = () => {
//   const div = useRef();
//   const ipt = useRef();
//   const fn = () => {
//     console.log(div.current);
//     console.log(ipt.current.value);
//   };
//   return (
//     <>
//       <h2>useRef</h2>
//       <div ref={div}>123</div>
//       <input type="text" ref={ipt} />
//       <button onClick={fn}>btn</button>
//     </>
//   );
// };

// export default App;

// import React, { useState, useEffect } from "react";
import React, { useRef } from "react";

const App = () => {
  // const [count, setCount] = useState(1);
  // const fn = (n) => {
  //   setCount((v) => v + n);
  // };
  // useEffect(() => {
  //   setTimeout(() => {
  //     console.log(count);
  //   }, 2000);
  // }, [count]);
  // return (
  //   <>
  //     <h2>useRef2</h2>
  //     <button onClick={() => fn(-1)}>-</button>
  //     <span>{count}</span>
  //     <button onClick={() => fn(1)}>+</button>
  //   </>
  // );
  const count = useRef(1);

  const showCount = () => {
    console.log("count: " + count.current);
  };

  const handleClick = (number) => {
    count.current = count.current + number;
    setTimeout(showCount, 3000);
  };

  return (
    <div>
      <p>You clicked {count.current} times</p>
      <button onClick={() => handleClick(1)}>增加 count</button>
      <button onClick={() => handleClick(-1)}>减少 count</button>
    </div>
  );
};

export default App;
